<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="config dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('会议类型')" prop="meetingType">
            <dict-select v-model="form.meetingType" :disabled="form.id" :placeholder="$t('会议类型')" dictionary="mt_type" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认常规参会人员')" prop="participant">
            <UserSelect v-model="form.participant" :placeholder="$t('默认常规参会人员')" multiple clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认常规参会基金团队成员')" prop="investRole">
            <dict-select v-model="form.investRole" dictionary="fund_team_role" :placeholder="$t('默认常规参会基金团队成员')" multiple clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认会议纪要人')" prop="meetingBriefer">
            <UserSelect v-model="form.meetingBriefer" :placeholder="$t('默认会议纪要人')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认邮件发送角色')" prop="sendRole">
            <el-select v-model="form.sendRole" filterable multiple :placeholder="$t('默认邮件发送角色')">
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认邮件发送人员')" prop="sendMember">
            <UserSelect v-model="form.sendMember" multiple :placeholder="$t('默认邮件发送人员')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认邮件发送基金团队成员')" prop="investSendRole">
            <dict-select v-model="form.investSendRole" dictionary="fund_team_role" multiple :placeholder="$t('默认邮件发送基金团队成员')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认邮件抄送角色')" prop="ccRole">
            <el-select v-model="form.ccRole" filterable multiple :placeholder="$t('默认邮件抄送角色')">
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认邮件抄送人员')" prop="ccMember">
            <UserSelect v-model="form.ccMember" type="textarea" :placeholder="$t('默认邮件抄送人员')" multiple />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('默认邮件抄送基金团队成员')" prop="investCcRole">
            <dict-select v-model="form.investCcRole" dictionary="fund_team_role" multiple :placeholder="$t('默认邮件抄送基金团队成员')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议结论对应流程')" prop="processKey">
            <el-select v-model="form.processKey" filterable :placeholder="$t('请选择')" clearable>
              <el-option
                v-for="process in procDefKeyOptions"
                :key="process.key"
                :label="$t(process.name)"
                :value="process.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否需要投票')" prop="voteFlag">
            <dict-select v-model="form.voteFlag" :clearable="false" :placeholder="$t('是否需要投票')" dictionary="sys_yes_no" />
          </el-form-item>
        </el-col>
        <template v-if="form.voteFlag === 'Y'">
          <el-col :span="12">
            <el-form-item :label="$t('默认投票人员')" prop="voteParticipant">
              <UserSelect v-model="form.voteParticipant" multiple :placeholder="$t('默认投票人员')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('默认投票基金团队成员')" prop="investVoteRole">
              <dict-select v-model="form.investVoteRole" dictionary="fund_team_role" multiple :placeholder="$t('默认投票基金团队成员')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('默认投票通过比例')" prop="voteRatio" :rules="rules.defaultVoteRatio">
              <template slot="label">
                <span>{{ $t('默认投票通过比例') }}</span>
                <el-tooltip effect="dark" placement="right">
                  <!--  问号的图标   -->
                  <i class="el-icon-question" />
                  <!--  提示的内容 -->
                  <div slot="content">
                    <p>1.投票比例可以填写分数、数字、百分数</p>
                    <p>2.数字大于0小于1，则会乘100后计算</p>
                    <p>3.数字大于1则会按照百分数计算</p>
                    <p>4.比例不能大于100，分数分子不能大于分母，并且分母不能为0</p>
                  </div>
                </el-tooltip>
              </template>
              <el-input v-model="form.voteRatio" :placeholder="$t('默认投票通过比例')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投票流程')" prop="voteProcess">
              <el-select v-model="form.voteProcess" filterable :placeholder="$t('请选择')">
                <el-option
                  v-for="process in procDefKeyOptions"
                  :key="process.key"
                  :label="$t(process.name)"
                  :value="process.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="24">
          <div class="area-header">
            <span class="area-header-title">{{ $t('常规参会人员配置') }}</span>
          </div>
          <el-table v-loading="loading" :data="form.detailPersonList" border tooltip-effect="darkTable">
            <el-table-column :label="$t('基金名称')" align="center" prop="fundId">
              <template slot="header">
                <span style="color: red">*</span>
                <span>{{ $t('基金名称') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'detailPersonList.'+scope.$index+'.fundId'" :rules="rules.fundId">
                  <fund-select v-model="scope.row.fundId" :placeholder="$t('基金名称')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('常规参会人员')" align="center" prop="participant">
              <template slot-scope="scope">
                <el-form-item :prop="'detailPersonList.'+scope.$index+'.participant'">
                  <UserSelect v-model="scope.row.participant" multiple :placeholder="$t('常规参会人员')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="form.voteFlag === 'Y'" :label="$t('投票人员')" align="center" prop="voteParticipant">
              <template slot-scope="scope">
                <el-form-item :prop="'detailPersonList.'+scope.$index+'.voteParticipant'">
                  <UserSelect v-model="scope.row.voteParticipant" multiple :placeholder="$t('投票人员')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="form.voteFlag === 'Y'" :label="$t('投票通过比例')" align="center" prop="voteRatio" width="180">
              <template slot-scope="scope">
                <el-form-item :prop="'detailPersonList.'+scope.$index+'.voteRatio'" :rules="rules.voteRatio">
                  <el-input v-model="scope.row.voteRatio" :placeholder="$t('投票通过比例')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('会议纪要人')" align="center" prop="meetingBriefer">
              <template slot-scope="scope">
                <el-form-item :prop="'detailPersonList.'+scope.$index+'.meetingBriefer'">
                  <UserSelect v-model="scope.row.meetingBriefer" :placeholder="$t('会议纪要人')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteHandle(scope.$index,'member')"
                >{{ $t('删除') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="small" style="margin-top: 5px;" @click="addList('member')">{{ this.$t('添加') }}</el-button>
        </el-col>
        <el-col :span="24" style="margin-top: 10px;">
          <div class="area-header">
            <span class="area-header-title">{{ $t('邮件发送配置') }}</span>
          </div>
          <el-table v-loading="loading" :data="form.detailConfigList" border tooltip-effect="darkTable">
            <el-table-column :label="$t('基金名称')" align="center" prop="fundId">
              <template slot="header">
                <span style="color: red">*</span>
                <span>{{ $t('基金名称') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'detailConfigList.'+scope.$index+'.fundId'" :rules="rules.fundId">
                  <fund-select v-model="scope.row.fundId" :placeholder="$t('基金名称')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('邮件发送角色')" align="center" prop="sendRole">
              <template slot-scope="scope">
                <el-form-item :prop="'detailConfigList.'+scope.$index+'.sendRole'">
                  <el-select v-model="scope.row.sendRole" filterable multiple :placeholder="$t('邮件发送角色')">
                    <el-option
                      v-for="item in roleOptions"
                      :key="item.roleId"
                      :label="$t(item.roleName)"
                      :value="item.roleId"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('邮件发送人员')" align="center" prop="sendMember">
              <template slot-scope="scope">
                <el-form-item :prop="'detailConfigList.'+scope.$index+'.sendMember'">
                  <UserSelect v-model="scope.row.sendMember" multiple :placeholder="$t('邮件发送人员')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('邮件抄送角色')" align="center" prop="ccRole">
              <template slot-scope="scope">
                <el-form-item :prop="'detailConfigList.'+scope.$index+'.ccRole'">
                  <el-select v-model="scope.row.ccRole" filterable multiple :placeholder="$t('邮件抄送角色')">
                    <el-option
                      v-for="item in roleOptions"
                      :key="item.roleId"
                      :label="$t(item.roleName)"
                      :value="item.roleId"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('邮件抄送人员')" align="center" prop="ccMember">
              <template slot-scope="scope">
                <el-form-item :prop="'detailConfigList.'+scope.$index+'.ccMember'">
                  <UserSelect v-model="scope.row.ccMember" multiple :placeholder="$t('邮件抄送人员')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteHandle(scope.$index,'email')"
                >{{ $t('删除') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" size="small" style="margin-top: 5px;" @click="addList('email')">{{ this.$t('添加') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="meeting:config" />
    </div>
  </div>
</template>

<script>
import { saveMtPersonConfig, getMtPersonConfig, checkMeetingType } from '@/api/meeting/config/mtPersonConfig'
    import { listRole } from '@/api/system/role'
    import FundSelect from '@/components/Select/fundSelect.vue'
    import { listDataProcess } from '@/api/act/process/actProcess'
    export default {
      components: { FundSelect },
        data() {
            return {
                // 表单参数
                form: {},
                roleOptions: [],
                // 流程下拉框
                procDefKeyOptions: [],
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                  meetingType: [
                    {
                      required: true, message: this.$t('必填信息'), trigger: 'change'
                    },
                    {
                      validator: this.checkMeeting, trigger: 'change'
                    }
                  ],
                  fundId: [
                    {
                      required: true, message: this.$t('必填信息'), trigger: 'change'
                    }
                  ],
                  voteRatio: [
                    {
                      validator: this.validVoteRatio,
                      trigger: ['blur', 'change']
                    }
                  ],
                  defaultVoteRatio: [
                    {
                      required: true,
                      message: this.$t('必填信息'),
                      trigger: ['blur', 'change']
                    },
                    {
                      validator: this.validVoteRatio,
                      trigger: ['blur', 'change']
                    }
                  ],
                  voteFlag: [
                    {
                      required: true, message: this.$t('必填信息'), trigger: ['blur', 'change']
                    }
                  ]
                }
            }
        },
        created() {
          listRole({}).then(response => {
            this.roleOptions = response.rows
          })
          // 查询流程下拉框
          listDataProcess().then(response => {
            this.procDefKeyOptions = response.data
          })
        },
        methods: {
          checkMeeting(rule, value, cb) {
            checkMeetingType(this.form.meetingType).then(res => {
              if (res.data || this.form.id) {
                cb()
              } else {
                cb(new Error(this.$t('当前会议类型已存在')))
              }
            })
          },
          validVoteRatio(rule, value, cb) {
            if (value) {
              var numberReg = /^([0-9]\d{0,1}|100[%]{0,1}$)(\.\d{1,2})?%?$/
              var reg = /^((\d+(\.\d+)?)|(\d+\/\d+))$/

              if (!isNaN(value)) {
                if (Number(value) > 100) {
                  cb(new Error(this.$t('百分数不能大于100')))
                  return
                }
              }

              if (reg.test(value)) {
                var arr = value.split('/')
                var numerator = arr[0]
                var denominator = arr[1]
                if (numerator > denominator) {
                  cb(new Error(this.$t('分数分子不能大于分母')))
                  return
                }
                if (denominator === 0) {
                  cb(new Error(this.$t('分数分母不能为0')))
                  return
                }
                cb()
                return
              }

              if (numberReg.test(value)) {
                cb()
              } else {
                cb(new Error(this.$t('投票比例仅能填写分数、数字、百分数，且不能大于100')))
              }
            } else {
              cb()
            }
          },
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getMtPersonConfig(data.id).then(response => {
                        this.form = response.data
                        if (!this.form.voteProcess) {
                          this.form.voteProcess = 'mt_meeting_vote'
                        }
                        this.loading = false
                    }).catch(() => {
                      this.loading = false
                    })
                } else {
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    meetingType: undefined,
                    processKey: undefined,
                  voteProcess: 'mt_meeting_vote',
                  participant: [],
                  voteParticipant: [],
                  voteRatio: undefined,
                  meetingBriefer: undefined,
                  sendRole: [],
                  sendMember: [],
                  ccRole: [],
                  ccMember: [],
                  investRole: [],
                  investVoteRole: [],
                  investSendRole: [],
                  investCcRole: [],
                    delFlag: undefined,
                  detailPersonList: [],
                  detailConfigList: [],
                  voteFlag: 'Y'
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
          // 新增配置
          addList(type) {
              if (type === 'member') {
                if (!(this.form.detailPersonList instanceof Array)) {
                  this.form.detailPersonList = []
                }
                const defaultData = {
                  fundId: undefined,
                  participant: undefined,
                  voteParticipant: undefined,
                  voteRatio: undefined,
                  meetingBriefer: undefined
                }
                this.form.detailPersonList.push(defaultData)
              } else if (type === 'email') {
                if (!(this.form.detailConfigList instanceof Array)) {
                  this.form.detailConfigList = []
                }
                const configData = {
                  fundId: undefined,
                  sendRole: undefined,
                  sendMember: undefined,
                  ccRole: undefined,
                  ccMember: undefined
                }
                this.form.detailConfigList.push(configData)
              }
          },
          deleteHandle(index, type) {
              if (type === 'member') {
                this.form.detailPersonList.splice(index, 1)
              } else if (type === 'email') {
                this.form.detailConfigList.splice(index, 1)
              }
          },
            /** 提交按钮 */
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveMtPersonConfig(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                }).catch(() => {
                    this.loading = false
                })
           }
        }
    }
</script>

<style scoped lang="scss">
/deep/.config.dataForm .el-row .el-form-item {
  min-height: unset;
}
/deep/.config.dataForm .el-row .el-form-item.is-error {
  min-height: 55px;
}
</style>
